<template>
  <div>
    <my-header></my-header>

    <!-- 卡片 -->
    <el-card class="box-card">
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加角色</el-button
      >
      <br /><br />

      <!--  表格渲染 -->
      <el-table :data="list">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row
              :gutter="20"
              class="rowOne"
              v-for="(item, index) in props.row.children"
              :key="index"
            >
              <el-col :span="3">
                <el-tag closable @close="delChange(props.row, item.id)">
                  {{ item.authName }}
                </el-tag>
              </el-col>
              <el-col :span="17">
                <el-row
                  class="rowTwo"
                  v-for="(item2, index2) in item.children"
                  :key="index2"
                >
                  <el-col
                    ><el-tag
                      @close="delChange(props.row, item2.id)"
                      closable
                      type="success"
                      >{{ item.authName }}</el-tag
                    ></el-col
                  >
                  <el-col>
                    <el-tag
                      type="warning"
                      v-for="(item3, index3) in item2.children"
                      :key="index3"
                      class="tag"
                      closable
                      @close="delChange(props.row, item3.id)"
                    >
                      {{ item3.authName }}</el-tag
                    ></el-col
                  >
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type="index" width="120"> </el-table-column>
        <el-table-column property="roleName" label="名称" width="120">
        </el-table-column>
        <el-table-column property="roleDesc" label="描述" width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              icon="el-icon-delete-solid"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button
              icon="el-icon-s-tools"
              size="mini"
              type="warning"
              @click="handlePut(scope.row)"
              >分配角色</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加弹框 -->

      <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input
              v-model="ruleForm.roleName"
              placeholder="该项不能为空"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 编辑用户 -->
      <el-dialog title="编辑用户" :visible.sync="dialogFormVisible1">
        <el-form
          :model="ruleForm1"
          ref="ruleForm1"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input
              v-model="ruleForm1.roleName"
              placeholder="该项不能为空"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="ruleForm1.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm1('ruleForm1')"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- 分配角色 -->
      <el-dialog title="分配角色" :visible.sync="dialogFormVisible2">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expanded-keys="arr"
          :default-checked-keys="arr"
          highlight-current
          :props="defaultProps"
        >
        </el-tree>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm2"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getRolesTable,
  getAddRoles,
  getDeleteRoles,
  getPutRoles,
  // getRolesRights,
  getRoleDelete,
  getRolesRight,
  getRolesRids,
} from "../../api/juse";
import myHeader from "../../components/myHeader.vue";
export default {
  components: { myHeader },
  data() {
    return {
      arr:[],
      data: [],
      defaultProps: {
        children: "children",
        label: "authName",
      },
      list: [],
      dialogFormVisible: false,
      ruleForm: {
        roleName: "",
        roleDesc: "",
      },
      dialogFormVisible1: false,
      ruleForm1: {
        roleName: "",
        roleDesc: "",
        id: "",
      },
      dialogFormVisible2: false,
      rolesId:0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 角色单个删除
    async delChange(row, id) {
      console.log(row, id, "175");
      //   this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(async () => {
      //     // let obj={row,id}
      let res = await getRoleDelete({ row, id });
      console.log(res, "getRoleDelete");
      if (res.meta.status == 200) {
        row.children = res.data;
      }
      // })
      // .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "已取消删除",
      //   });
      // });
    },
    // 添加
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          let res = await getAddRoles(this.ruleForm);
          console.log(res, "resAddRoles");
          this.dialogFormVisible = false;
          this.getList();
          this.ruleForm.roleName = "";
          this.ruleForm.roleDesc = "";
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 渲染
    async getList() {
      let res = await getRolesTable();
      console.log(res, "resRoles");
      this.list = res.data;
      console.log(this.list, "list");
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.ruleForm1 = row;
      this.dialogFormVisible1 = true;
      console.log(this.ruleForm1, "rilesFrom1");
    },
    submitForm1(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          let res = await getPutRoles(this.ruleForm1);
          console.log(res, "resPutRoles");
          this.dialogFormVisible1 = false;
          this.getList();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await getDeleteRoles(row);
          console.log(res, "resRolesDelete");
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分配角色
    async handlePut( row) {
      console.log(row,"row");
      this.dialogFormVisible2 = true;
      this.rolesId=row.id
      this.arr=[]
      // 获取所有接口请求
      let res = await getRolesRight("tree");
      console.log(res, "tree");
      if(res.meta.status===200){
        this.data = res.data;
      }
      let obj=[]
      // 回显
      // 那当前角色信息下最后一个children的id
      function fn(row) {
        if (!row.children) {
          // 如果没有children证明就是最后一个，把该children对应的id推入数组
          return obj.push(row.id);
        } 
          row.children.forEach(item => {
            return  fn(item)
          })
        
      }
      fn(row);
      console.log("321", obj);
      this.arr=obj
      console.log(this.arr,"arr")
    },
    // 点击确定按钮，更新角色
    async submitForm2() {
      console.log(326)
      // // 拿到全选中的数据
      let all=this.$refs.tree.getCheckedKeys()
      // // 拿到半选中的数据
      let half=this.$refs.tree.getHalfCheckedKeys()
           console.log(331)
      // console.log(all,half,"all half")
       let str=[...all,...half].join(",")
             console.log(334)
       let res=await getRolesRids({id:this.rolesId,rids:str})
       console.log(res,"reRids")
       if(res.meta.status==200){
        this.dialogFormVisible2=false
        this.getList()
       }
    },
  },
};
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}
.rowTwo {
  display: flex;
  /* border-bottom: 1px solid #ddd; */
}
.rowOne {
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  padding: 5px;
  display: flex;
}
.tag {
  margin: 5px;
}
</style>